<template>
  <div class="app-container">
      <div class="right-detail">
            <div class="cbox">
              <el-form
                class="form"
                ref="flt"
                :rules="rules"
                label-width="11rem"
                size="mini"
                inline
                :model="from"
              >
                <el-row class="row">
                  <el-col :span="24">
                    <el-form-item label="客户企业名称：">
                      <el-input placeholder="请输入客户企业名称" v-model="from.customerName" style="width: 100%" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="审核标志：">
                      <el-select placeholder="请选择审核标志" v-model="from.flag" style="width: 100%" clearable>
                        <el-option value="Y" label="已审核"></el-option>
                        <el-option value="N" label="未审核"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label-width="2rem">
                      <el-button @click="searchType" type="primary">查询</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <!-- 上半部分 -->
            <div class="top-type" ref="topType">
              <div class="btn-area" ref="btnArea">
                <el-button plain size="mini" type="success" @click="addRefType">审核客户</el-button>
                <el-button plain size="mini" type="info" @click="customer">取消审核客户</el-button>
              </div>
                <el-table
                  :data='dataList'
                  border
                  :height="400"
                  :header-cell-style="{ textAlign: 'center' }"
                  highlight-current-row
                  @row-click="rowClick">
                  <el-table-column type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                  <el-table-column prop="cltSatue" show-overflow-tooltip label="审核标志" width="120px">
                    <template slot-scope="scope">
                        <div
                          style="text-align: center;"
                          v-if="scope.row.cltSatue == 'Y'"
                        >
                        <span>已审核</span>
                          <!-- <el-checkbox v-model="checkedY" disabled></el-checkbox> -->
                        </div>
                        <div
                          style="text-align: center;"
                          v-else
                        >
                         <span>未审核</span>
                          <!-- <el-checkbox v-model="checkedN" disabled></el-checkbox> -->
                        </div>
                      </template>
                  </el-table-column>
                  <el-table-column prop="cltName" show-overflow-tooltip label="客户企业名称"  width="140px"></el-table-column>
                  <el-table-column prop="cltEgsname" show-overflow-tooltip label="客户英文名称" width="120px"></el-table-column>
                  <el-table-column prop="cltType" show-overflow-tooltip label="客户类型" width="120px"></el-table-column>
                  <el-table-column prop="cltRegistorno" show-overflow-tooltip label="工商登记号" width="180px"></el-table-column>
                  <el-table-column prop="cltShtname" show-overflow-tooltip label="客户简称" width="180px"></el-table-column>
                  <el-table-column prop="cltContact"  show-overflow-tooltip label="联系人"  width="120px"></el-table-column>
                  <el-table-column prop="cltCtctel" show-overflow-tooltip label="联系电话" width="100px"></el-table-column>
                  <el-table-column prop="cltAddress" show-overflow-tooltip label="客户地址" width="100px"></el-table-column>
                  <el-table-column prop="cltCliCode" show-overflow-tooltip label="企业代码"  width="120px"></el-table-column>
                  <el-table-column prop="cltCliCtctel" show-overflow-tooltip label="企业电话"  width="120px"></el-table-column>
                  <el-table-column prop="cltCliAddress" show-overflow-tooltip label="企业地址" width="120px"></el-table-column>
                  <el-table-column prop="cltCliLegalname" show-overflow-tooltip label="法人姓名"  width="120px"></el-table-column>
                  <el-table-column prop="cltRegistertype" show-overflow-tooltip label="注册类型"  width="120">
                    <template slot-scope="scope">
                      <span>{{ registertype[scope.row.cltRegistertype] || '' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="cltSatName" show-overflow-tooltip label="审核人" width="130px"></el-table-column>
                  <el-table-column prop="cltSatTime" show-overflow-tooltip label="审核时间" width="100px"></el-table-column>
                  <el-table-column prop="cltInsertuser" show-overflow-tooltip label="创建员工" width="100px"></el-table-column>
                  <el-table-column prop="cltInsertdt" show-overflow-tooltip label="创建时间" width="100px"></el-table-column>
                  <el-table-column prop="cltLstupduser" show-overflow-tooltip label="最后修改员工" width="120px"></el-table-column>
                  <el-table-column prop="cltLstupddt" show-overflow-tooltip label="最后修改时间" width="120px"></el-table-column>
                  <el-table-column prop="cltVlflag" show-overflow-tooltip label="是否有效"  width="120px">
                    <template slot-scope="scope">
                        <div
                          style="text-align: center;"
                        >
                          <el-checkbox v-model="scope.row.cltVlflag" true-label="Y" false-label="N" disabled></el-checkbox>
                        </div>
                      </template>
                  </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div>
                    <el-pagination
                      class="pagination"
                      small
                      background
                      ref="pagination"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="Pagination.currentPage"
                      :page-sizes="Pagination.pageSizeList"
                      :page-size="Pagination.pageSize"
                      :layout="Pagination.layout"
                      :total="Pagination.total"
                    ></el-pagination>
                </div>
            </div>
            <!-- 下半部分 -->
            <div class="top-type" ref="topType">
                  <div class="btn-area" ref="btnArea">
                    <el-button plain size="mini" type="success" @click="add">新增用户</el-button>
                    <el-button plain size="mini" type="primary" @click="del('diong')">编辑用户</el-button>
                    <el-button plain size="mini" type="success" @click="examine">审核用户</el-button>
                    <el-button plain size="mini" type="info" @click="cancel">取消审核</el-button>
                    <el-button plain size="mini" type="warning" @click="reset">重置密码</el-button>
                  </div>
                      <el-table
                      :data="DetailedData"
                      border
                      :height="285"
                      :header-cell-style="{ textAlign: 'center' }"
                      highlight-current-row
                      @row-click="rowClickDetail">
                      <el-table-column type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column prop="ffuSatue" show-overflow-tooltip label="审核标志">
                        <template slot-scope="scope">
                          <span v-if="scope.row.ffuSatue==='Y'">已审核</span>
                          <span v-else>未审核</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="ffuName" show-overflow-tooltip label="用户名"></el-table-column>
                      <el-table-column prop="ffuMobile" show-overflow-tooltip label="手机号码"></el-table-column>
                      <el-table-column prop="ffuEmail" show-overflow-tooltip label="用户邮箱"></el-table-column>
                      <el-table-column prop="ffuSatName" show-overflow-tooltip label="审核人"></el-table-column>
                      <el-table-column prop="ffuSatTime" show-overflow-tooltip label="审核时间"></el-table-column>
                    </el-table>
                </div>
        </div>
        <!-- 上半部分弹出框 -->
        <el-dialog
        width="70%"
          v-el-drag-dialog
          :title='addText'
          :visible.sync="addShow"
          v-if="addShow"
          :close-on-click-modal="false">
          <sdialog
           @close="close"
           :RowTableData='TableData'
           :flagdialog ='flagdialog'
          ></sdialog>
        </el-dialog>

        <!-- 下半部分弹出框 新增 编辑 -->
        <el-dialog
          v-el-drag-dialog
          :title='addText'
          :visible.sync="addShowA"
          v-if="addShowA"
          :close-on-click-modal="false">
              <el-form  label-width="10rem" :model="xzData"  ref="xzData"  size="mini" :rules="addRules">
                  <el-row class="hrow">
                      <el-col :span="12">
                        <el-form-item prop="ffuName" label="用户名称：">
                          <el-input maxlength="32" v-model="xzData.ffuName" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="ffuPassword" label="密码：" v-if="diong!='E'">
                          <el-input maxlength="32" v-model="xzData.ffuPassword" type="password"  clearable></el-input>
                        </el-form-item>
                        <el-form-item prop="" label="密码：" v-else>
                          <el-input maxlength="32" type="password"  :disabled="diong==='E'"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item prop="ffuMobile" label="手机号码：">
                          <el-input maxlength="11" v-model="xzData.ffuMobile" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="ffuEmail" label="用户邮箱：">
                          <el-input maxlength="32" v-model="xzData.ffuEmail" clearable></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
              </el-form>
               <div  class="dialog-footer">
                  <div class="btn">
                      <el-button type="primary" size="mini" @click="saveEditor('xzData')">保存</el-button>
                    <el-button size="mini"  @click="close">关闭</el-button>
                  </div>
          </div>
        </el-dialog>
             <!-- 下半部分弹出框 审核用户 -->
        <el-dialog
          v-el-drag-dialog
          :data='examineData'
          :title='addText'
          :visible.sync="addShowB"
          v-if="addShowB"
          :close-on-click-modal="false">
              <el-form  label-width="10rem"  size="mini" :model="examineData" ref="examineData" >
                  <el-row >
                      <el-col :span="12">
                        <el-form-item prop="ffuName" label="用户名称：">
                          <el-input maxlength="32" v-model="examineData.ffuName" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="ffuMobile" label="手机号码：">
                          <el-input maxlength="11" v-model="examineData.ffuMobile" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item prop="ffuEmail" label="用户邮箱：">
                          <el-input maxlength="32" v-model="examineData.ffuEmail" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                      <el-form-item prop="ffuSatue" label="是否审核：" >
                        <el-radio-group v-model="examineData.ffuSatue">
                          <el-radio label="Y">是</el-radio>
                          <el-radio label="N">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                        <el-form-item prop="fctRemark" label="审核意见：">
                          <el-input  maxlength="250" type="textarea" v-model="examineData.fctRemark" clearable></el-input>
                        </el-form-item>
                    </el-col>
                  </el-row>
              </el-form>
               <div  class="dialog-footer">
                  <div class="btn">
                      <el-button type="primary" size="mini" @click="examineBC">保存</el-button>
                    <el-button size="mini" @click="close">关闭</el-button>
                  </div>
          </div>
        </el-dialog>
  </div>
</template>

<script>
import {getAuditUserToList,cancelAuditTmClient,getUserToList,addTmUserModel,editUserInfo,auditUser,cancelAuditUser,reSetUserPwd} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import sdialog from './auditDialog'
export default {
  mixins: [resizeMixin,paginationMixin],
  data(){
    return{
      registertype: {
        0: '门户注册',
        1: '后台注册',
        2: 'APP注册'
      },
      from:{
        customerName:'',
        flag: '', // 审核标志
      },
      diong:'',
      addText:'',
      addShow:false, //上半部分  审核客户弹出框
      addShowA:false, //下半部分 新增 编辑
      addShowB:false, // 下半部分 审核用户
      dataList:[],//列表数据
      TableData:{},
      DetailedData:[], //传给下半部分列表的数据
      xzData:[],// 传给下半部分新增 编辑弹出框的数据
      examineData:[],//下半部分 审核弹出框的数据
      //表单验证 新增 编辑
      addRules:{
        ffuName:[
          { required: true, message: '请填写用户名称', trigger:'blur'}
        ],
        ffuPassword:[
          { required: true, message: '请填写密码', trigger:'blur'},
          { pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,30}$/,
            message: '密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 8-30位'
          }

        ],
        ffuMobile:[
          { required: true, message: '请填写手机号码', trigger:'blur'},
          {pattern:/^[0-9]+$/,message:'请输入手机号码',trigger:'blur'}
        ],
        ffuEmail:[
          { required: true, message: '邮箱格式错误', trigger:'blur'},
          {pattern:/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,message:'请输入邮箱',trigger:'blur'}
        ]
      }

    }
  },
  mounted(){
    this.getList(this.Pagination.currentPage,this.Pagination.pageSize,this.updatePaginationTotal)
  },
  methods:{
    getList(currentPage, pageSize, updateTotal) {
      this.currentData = {}
      getAuditUserToList({
        cltName: this.from.customerName,
        cltSatue: this.from.flag,
        PageIndexs: currentPage.toString(),
        PageSizes: pageSize.toString()
      }).then(response => {
        // if(response.success==1){
        this.dataList = response.data
        updateTotal(Number(response.total))
      })
    },

    //上半部分  点击查询
    searchType(){
      this.$refs.flt.validate(valid=>{
        if(valid){
          this.getList(this.Pagination.currentPage,this.Pagination.pageSize,this.updatePaginationTotal)
        }
      })
    },
    // 上部分审核客户
    addRefType(){
      if(Object.keys(this.TableData).length===0){
        this.$alert('请选择需要审核的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }

      if(this.TableData.cltSatue==='Y'){
        this.$alert('该客户已审核，无法审核！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.addText= '客户审核信息'
      this.addShow=true
    },
    // 上部分 取消审核
    customer(){
      if(Object.keys(this.TableData).length==0){
        this.$alert('请选择需要审核的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }

      if(this.TableData.cltSatue==='Y'){
        if(this.DetailedData.length>0){
          if(this.examineData.ffuSatue==='Y'){
            this.$alert('该客户下存在已审核用户，先取消用户！', '提示', {
              confirmButtonText: '确定'
            })
            return
          }
          this.$confirm('注意！您确定取消该客户吗？取消后不可恢复','提示',{
            confirmButtonText: '确定'
          }).then(()=>{
            this.TableData.cltSatue='N'
            cancelAuditTmClient(this.TableData).then(res=>{
              // this.TableData={}
              if(res.success=='1'){
                this.$message ({
                  type: 'success',
                  message: '取消审核成功'
                })
              }
              this.TableData={}
              this.refreshList()
            })
          })
        }else{
          this.$confirm('注意！您确定取消该客户吗？取消后不可恢复','提示',{
            confirmButtonText: '确定'
          }).then(()=>{
            this.TableData.cltSatue='N'
            cancelAuditTmClient(this.TableData).then(res=>{
              // this.TableData={}
              if(res.success=='1'){
                this.$message ({
                  type: 'success',
                  message: '取消审核成功'
                })
              }
              this.TableData={}
              this.refreshList()
            })
          })
        }
      }else{
        this.$alert('该客户尚未审核，无法取消审核！', '提示', {
          confirmButtonText: '确定'
        })
      }

    },

    //下半部分 新增
    add(){
      // console.log(this.TableData)
      if(Object.keys(this.TableData).length===0){
        this.$alert('请选择客户！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.diong=''
      this.addText= '新增用户'
      this.addShowA=true
      this.xzData={
        ffuStatus:'',
        ffuUserno:'',
        fctRemark:'',
        ffuCltId:this.TableData.cltId,//客户与用户关联id
        ffuMobile:'',
        ffuWechat:'',
        ffuQq:'',
        ffuSatTime:'',
        ffuSatue:'N',
        ffuId:'',
        ffuPassword:'',
        ffuEmail:'',
        ffuName:'',
      }
    },
    //下半部分 编辑
    del(){
      if(Object.keys(this.examineData).length===0){
        this.$alert('请选择需要编辑用户！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if(this.examineData.ffuSatue==='N'){
        this.diong='E'
        this.addText= '编辑用户信息'
        this.addShowA=true
        this.xzData=Object.assign({},this.examineData)
      }else{
        this.$alert('该用户已审核，无法编辑！', '提示', {
          confirmButtonText: '确定'
        })
      }
    },

    //新增 编辑 弹出框 保存
    saveEditor(xzData){
      this.$refs[xzData].validate((valid) => {
        if (valid) {
          if (this.diong ==='E') {
            editUserInfo(this.xzData).then(res=>{
              if(res.success=='1'){
                this.$message ({
                  type: 'success',
                  message: '编辑成功'
                })
              }
              this.close()
            })
            this.xzData = []
            // this.close()
          }else{
            addTmUserModel(this.xzData).then(res=>{
              // console.log(res)
              if(res.success=='1'){
                this.$message ({
                  type: 'success',
                  message: '添加成功'
                })
              }
              this.close()
            })
          }

          this.$refs[xzData].resetFields()
        } else {
          return false
        }
      })
    },

    //下半部分  审核用户
    examine(){
      if(Object.keys(this.examineData).length===0){
        this.$alert('请选择需要审核用户！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if(this.TableData.cltSatue==='N'){
        this.$alert('该客户未审核，无法审核用户！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }else{
        if(this.examineData.ffuSatue==='Y'){
          this.$alert('该用户已审核！', '提示', {
            confirmButtonText: '确定'
          })
          return
        }
        this.addText= '审核用户信息'
        this.addShowB=true
      }
    },
    // 审核用户弹出框  点击保存
    examineBC(){
      this.$refs.examineData.validate(valid=>{
        if(valid){
          auditUser(this.examineData).then(res=>{
            // console.log(res)
            if(res.success=='1'){
              this.$message ({
                type: 'success',
                message: '审核成功'
              })
            }
            this.close()
          })
        }
      })
    },
    //取消审核
    cancel(){
      if(Object.keys(this.examineData).length===0){
        this.$alert('请选择需要取消审核用户！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if(this.examineData.ffuSatue==='N'){
        this.$alert('用户状态已是未审核，无法取消审核！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      // console.log(1111)
      this.$confirm('注意！您确定取消该用户吗？取消后不可恢复','提示',{
        confirmButtonText: '确定'
      }).then(()=>{
        // console.log(1111)
        this.examineData.ffuSatue='N'
        cancelAuditUser(this.examineData).then(res=>{
          if(res.success=='1'){
            this.$message ({
              type: 'success',
              message: '用户取消审核成功'
            })
          }
          this.close()
        })
      })
    },
    //重置密码
    reset(){
      if(Object.keys(this.examineData).length===0){
        this.$alert('请选择需要重置密码的用户！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      reSetUserPwd(this.examineData.ffuId).then(res=>{
        if(res.success=='1'){
          this.$alert('密码已重置为Abc12345！', '提示', {
            confirmButtonText: '确定'
          })
        }
        this.close()
      })
    },
    //获取当前行数据 上
    rowClick(row){
      // console.log(row)
      this.TableData=Object.assign({},row)
      this.getDownTable()
    },
    //获取下方表格数据
    getDownTable(){
      getUserToList({ffuCltId:this.TableData.cltId}).then(res=>{
        this.DetailedData=res.data.FTKJWLHYPT
      })
    },
    //获取当前行数据 下
    rowClickDetail(row){
      this.examineData=Object.assign({},row)
    },
    // 关闭弹出框
    close(data){
      if(data==='u'){
        this.TableData={}
        this.refreshList()
        this.addShow=false
      }else{
        this.getDownTable()
        this.examineData={}
        this.addShowA=false
        this.addShowB=false
      }
    }
  },
  components:{
    sdialog
  }
}
</script>

<style  lang="scss" scoped>

// /deep/ .el-row{}
.hrow{
  margin-bottom:10px;
}
.app-container {
  overflow: auto;
  background-color: #fff;
  position: relative;
  height: 100%;
}
.tree {
  padding-right: 20px;
  font-size: 1.4rem;
}
.right-detail {

  .top-type {
    width: 100%;
    height: 100%;
    // margin-top: 20px;
    table {
      max-width: 100%;
      font-size: 1.4rem;
      td {
        min-width: 170px;
        line-height: 3rem;
        padding-right: 3rem;
      }
    }
  }
  .bottom-code {
    width: 100%;
    height: 100%;
  }
}
.codeNumberCode {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 40px;
}
.pagination {
  margin: 0.3rem 0;
}
.dialog-footer {
    position: relative;
    width: 100%;
    height: 40px;
    .btn {
      position: absolute;
      right:15px;
    }
  }
</style>
